<template>
	<div id="app" style="background-color: #fff;">
		<el-container>
			<el-header class="custom-header">
				<el-row>
					<el-col :lg="8" :sm="8" :xs="8">
						<div class="enterprise_panner">
							<img @click="tohome" src="~@/assets/logo.png" alt="electron-vue">
						</div>
					</el-col>
					<el-col :lg="8" :md="8" :sm="8" :xs="8" style="text-align: center; padding: 5px;">
						<el-button @click="lendBooksFun()" type="primary" style="font-size: 35px;" class="common-lend">借
						</el-button>
						<el-button type="success" @click="returnBooks()" style="font-size: 35px;" class="common-return">
							还</el-button>
					</el-col>
					<el-col :lg="8" :sm="8" :xs="8">
					</el-col>
				</el-row>
			</el-header>
			<el-container>
				<el-aside width="200px">
					<!-- unique-opened -->
					<el-menu style=" color: #000000; border-right: solid 1px azure !important;" router
						text-color="#545c64" default-active="2" background-color="azure" active-text-color="#ffd04b">
						<el-submenu index="1">
							<template slot="title">
								<i class="el-icon-location"></i>
								<span>读书管理</span>
							</template>
							<el-menu-item-group>
								<template slot="title"></template>
								<el-menu-item index="1-1" route="books">读书管理</el-menu-item>
							</el-menu-item-group>
							<!-- <el-menu-item-group>
								<template slot="title"></template>
								<el-menu-item index="1-2" route="lends">借阅管理</el-menu-item>
							</el-menu-item-group> -->

						</el-submenu>
						<el-submenu index="2">
							<template slot="title">
								<i class="el-icon-location"></i>
								<span>用户管理</span>
							</template>
							<el-menu-item-group>
								<template slot="title"></template>
								<el-menu-item index="2-1" route="/users">用户用户管理</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
						<el-submenu index="3">
							<template slot="title">
								<i class="el-icon-location"></i>
								<span>系统管理</span>
							</template>
							<el-menu-item-group>
								<template slot="title"></template>
								<el-menu-item index="3-1" route="/sysusers">管理员管理</el-menu-item>
								<el-menu-item index="3-2" route="/setting">设置</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
					</el-menu>

				</el-aside>
				<el-main>
					<router-view />
				</el-main>
			</el-container>
		</el-container>
		<el-dialog title="借书操作" style="width: auto;" :visible.sync="dialogLendBooksVisible">

			<el-row>
				<el-col :lg="14">
					<el-container>
						<el-header>
							<el-form :model="bookmodel" :inline="true" class="demo-form-inline"
								style="width: auto; float: left;">
								<el-form-item>
									<el-input placeholder="请输入ISBN码" v-model="bookmodel.isbn"></el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="getBook()" icon="el-icon-search"></el-button>
								</el-form-item>
							</el-form>
						</el-header>
						<el-main style="padding: unset;">
							<el-scrollbar>
								<el-form>
									<el-card :body-style="{ padding: '0px' }" v-for="o in books" class="card-style">
										<img :src="o.cover" class="image" />
										<div style="padding: 14px;">
											<span>{{o.title}}</span>
											<div class="bottom clearfix">
												<time class="time">{{o.isbn}}</time>
												<el-button type="text" @click="removeInLendList(o.isbn)" class="button">
													删除</el-button>
											</div>
										</div>
									</el-card>
								</el-form>
							</el-scrollbar>
						</el-main>
					</el-container>

				</el-col>
				<el-col :lg="10">
					<el-container>
						<el-header>
							<el-form :model="usermodel" :inline="true" class="demo-form-inline"
								style="width: auto; float: left;">
								<el-form-item>
									<el-input v-model="usermodel.number" placeholder="学号"></el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="getUser()" icon="el-icon-search"></el-button>
								</el-form-item>
							</el-form>
						</el-header>
						<el-main>
							<el-form :model="user" text-align="left">
								<el-form-item label="头像 :" :label-width="formLabelWidth" style="margin-bottom: 12px;">
									<img v-if="!user.headerPath" style="max-width: 100px;max-width: 100px;"
										src="~@/assets/logo.png" alt="electron-vue">
									<img v-if="user.headerPath" style="max-width: 100px;max-width: 100px;"
										:src="user.headerPath" alt="electron-vue">

								</el-form-item>
								<el-form-item label="学号 :" :label-width="formLabelWidth" style="margin-bottom: 12px;">
									<label>{{user.number}}</label>
								</el-form-item>
								<el-form-item label="性别 :" :label-width="formLabelWidth" style="margin-bottom: 12px;">
									<label>{{user.gender}}</label>
								</el-form-item>
								<el-form-item label="班级 :" :label-width="formLabelWidth" style="margin-bottom: 12px;">
									<label>{{user.classes}}</label>
								</el-form-item>
								<!-- <el-form-item label="在借读书 :" :label-width="formLabelWidth" style="margin-bottom: 12px;">
									<label>{{user.books}}</label>
								</el-form-item> -->
							</el-form>
						</el-main>
					</el-container>
				</el-col>
			</el-row>

			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogLendBooksVisible = false">取 消</el-button>
				<el-button type="primary" @click="excuteLend()">确 定</el-button>
			</div>
		</el-dialog>

		<el-dialog title="还书操作" style="width: auto;" :visible.sync="dialogReturnBooksVisible">

			<el-row>
				<el-col :lg="10">
					<el-container>
						<el-header>
							<el-form :model="usermodel" :inline="true" class="demo-form-inline"
								style="width: auto; float: left;">
								<el-form-item>
									<el-input v-model="usermodel.number" placeholder="学号"></el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="getLendUser()" icon="el-icon-search"></el-button>
								</el-form-item>
							</el-form>
						</el-header>
						<el-main>
							<el-form :model="user" text-align="left">
								<el-form-item label="头像 :" :label-width="formLabelWidth" style="margin-bottom: 12px;">
									<img v-if="!user.headerPath" style="max-width: 100px;max-width: 100px;"
										src="~@/assets/logo.png" alt="electron-vue">
									<img v-if="user.headerPath" style="max-width: 100px;max-width: 100px;"
										:src="user.headerPath" alt="electron-vue">
								</el-form-item>
								<el-form-item label="学号 :" :label-width="formLabelWidth" style="margin-bottom: 12px;">
									<label>{{user.number}}</label>
								</el-form-item>
								<el-form-item label="性别 :" :label-width="formLabelWidth" style="margin-bottom: 12px;">
									<label>{{user.gender}}</label>
								</el-form-item>
								<el-form-item label="班级 :" :label-width="formLabelWidth" style="margin-bottom: 12px;">
									<label>{{user.classes}}</label>
								</el-form-item>
								<!-- 	<el-form-item label="在借读书 :" :label-width="formLabelWidth" style="margin-bottom: 12px;">
									<label>{{lendModel.books}}</label>
								</el-form-item> -->
							</el-form>
						</el-main>
					</el-container>
				</el-col>
				<el-col :lg="14" :class="showReturnBlock">
					<el-container>
						<el-header>
							<el-form :model="bookmodel" :inline="true" class="demo-form-inline"
								style="width: auto; float: left;">
								<el-form-item>
									<el-input placeholder="请输入ISBN码" style="" v-model="bookmodel.isbn"></el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="getLendBook()" icon="el-icon-search"></el-button>
								</el-form-item>
							</el-form>
						</el-header>
						<el-main style="padding: unset;">
							<el-scrollbar>
								<el-form>
									<el-card :body-style="{ padding: '0px' }" v-for="o in lendBooks" class="card-style">
										<img :src="o.cover" class="image" />
										<div style="padding: 14px;">
											<span>{{o.title}}</span>
											<div class="bottom clearfix">
												<time class="time">{{o.isbn}}</time>
												<el-button type="text" @click="removeInReturnList(o.isbn)"
													class="button">删除</el-button>
											</div>
										</div>
									</el-card>
								</el-form>
							</el-scrollbar>
						</el-main>
					</el-container>

				</el-col>

			</el-row>

			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogReturnBooksVisible = false">取 消</el-button>
				<el-button type="primary" @click="excuteReturn()">确认归还</el-button>
			</div>
		</el-dialog>


		<el-dialog title="" :visible.sync="dialogLoginVisible" :before-close="handleClose">

			<el-row>
				<el-col :lg="8">
					<img style="width: 100%;height:100%;" src="~@/assets/login.png" />
				</el-col>
				<el-col :lg="14" style="text-align: center;padding:30px;">
					<div style="padding:20px;">
						<h1>欢迎使用</h1>
					</div>
					<el-form :model="loginModel">
						<el-form-item label="账号" :label-width="formLabelWidth">
							<el-input type="input" v-model="loginModel.account"></el-input>
						</el-form-item>
						<el-form-item label="密码" :label-width="formLabelWidth">
							<el-input type="password" v-model="loginModel.password"></el-input>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>


			<div slot="footer" class="dialog-footer">
				<el-button @click="login()">登录</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		name: 'librarysystem',
		data() {
			return {
				loginAccount: '',
				loginModel: {
					account: '',
					password: ''
				},
				dialogLoginVisible: true,
				bookmodel: {
					isbn: ''
				},
				usermodel: {
					number: ''
				},
				formLabelWidth: '80px',
				dialogLendBooksVisible: false,
				dialogReturnBooksVisible: false,
				showReturnBlock: 'hiddenBooks',
				user: {
					name: '',
					number: '',
					headerPath: '~@/assets/images/hamburger.png',
					gender: '',
					classes: '',
					books: ''
				},
				books: [],
				lendBooks: [],
				lendModel: {
					id: this.$uuid.v1(),
					createTime: new Date().getTime(),
					books: [],
					user: {
						name: '',
						number: '',
						headerPath: '~@/assets/images/hamburger.png',
						gender: '',
						classes: ''
					},
					state: 'lend',
					returnTime: ''
				},
				holdBooks: []
			}

		},
		created: function() {
			var _self = this
			this.$localStorage.set('userAccount', '')
			var sysUserModel = {
				id: this.$uuid.v1(),
				account: 'admin',
				password: '123456'
			}
			this.$SysDatastore.find({}).exec(function(err, docs) {
				console.log(docs)
				if (docs.length < 1) {
					//add default system user
					_self.$SysDatastore.insert(sysUserModel, function(err, doc) {
					})
				}
			})
		},
		methods: {
			handleClose(done) {
				var _self = this
				this.$confirm('请登录')
					.then(_ => {
						//done();
						console.log(_self.$store.getItem('token'))
					})
					.catch(_ => {});
			},
			login() {
				var _self = this
				this.$SysDatastore.findOne({
					"account": _self.loginModel.account,
					"password": _self.loginModel.password
				}, function(err, docs) {
					if (docs != null) {
						_self.dialogLoginVisible = false
						_self.$localStorage.set('userAccount', _self.loginModel.account)
						console.log(_self.$localStorage.get('userAccount'))
					} else {
						_self.$message({
							type: 'info',
							message: '用户名或密码错误。'
						});
					}
				})
			},
			tohome() {
				if (this.$route.path != "/home") {
					this.$router.push("/home")
				}
			},
			lendBooksFun() {
				this.dialogLendBooksVisible = true
				this.user = {}
				this.books = []
			},
			returnBooks() {
				this.lendModel = {
					id: '',
					createTime: '',
					books: [],
					user: {
						name: '',
						number: '',
						headerPath: '~@/assets/images/hamburger.png',
						gender: '',
						classes: ''
					},
					state: 'lend',
					returnTime: ''
				}
				this.dialogReturnBooksVisible = true
			},
			getUser() {
				var _self = this
				this.$UserDatastore.findOne({
					"number": _self.usermodel.number
				}, function(err, docs) {
					console.log(docs)
					if (docs == null) {
						_self.$message({
							type: 'info',
							message: '用户不存在。'
						});
						return;
					}
					_self.user = docs
					if (docs.books.length > 3) {
						_self.$message({
							type: 'info',
							message: '该用户在借读书已达上限。'
						});
					}
				})
			},
			removeInLendList(isbn) {
				var newbooks = []
				for (var l = 0; l < this.books.length; l++) {
					if (this.books[l].isbn != isbn) {
						newbooks.push(this.books[l])
						return;
					} else {
						continue
					}
				}
				this.books = newbooks
			},
			removeInReturnList(isbn) {
				var nbooks = []
				for (var l = 0; l < this.lendBooks.length; l++) {
					if (this.lendBooks[l].isbn != isbn) {
						nbooks.push(this.lendBooks[l])
						return;
					} else {
						continue
					}
				}
				this.lendBooks = nbooks
			},
			getBook() {
				var _self = this
				if (_self.books.length > 3) {
					return;
				}
				for (var l = 0; l < _self.books.length; l++) {
					if (_self.books[l].isbn == _self.bookmodel.isbn) {
						_self.$message({
							type: 'info',
							message: '该用户在借读书已添加到列表中。'
						});
						return;
					} else {
						continue
					}
				}
				this.$BookDatastore.findOne({
					"isbn": _self.bookmodel.isbn,
					"state": 1
				}, function(err, docs) {
					console.log(docs)
					if (docs == null) {
						_self.$message({
							type: 'info',
							message: '没有找到相关读书信息,或者该书已被借出。'
						});
						return;
					}
					_self.books.push(docs)
				})
			},
			excuteLend() {
				var _self = this
				if (this.user.number === undefined) {
					_self.$message({
						type: 'info',
						message: '没有找到该用户'
					});
					return
				}
				if (this.books.length < 1) {
					_self.$message({
						type: 'info',
						message: '没有找到该读书'
					});
					return
				}

				var lendmodel = {
					id: this.$uuid.v1(),
					createTime: new Date().getTime(),
					books: _self.books,
					user: _self.user,
					state: 0,
					returnTime: ''
				}
				//exution update book state
				for (var b = 0; b < _self.books.length; b++) {
					_self.books[b].state = 0
					_self.books[b].userNumber = _self.user.number //lend user
					_self.books[b].lendTime = new Date().getTime() //lend time
					this.$BookDatastore.update({
						_id: _self.books[b]._id
					}, {
						$set: _self.books[b]
					}, function(err, docs) {

					})
				}
				this.$LendDatastore.insert(lendmodel, function(err, doc) {
					console.log('inserted:', doc)
					_self.dialogLendBooksVisible = false
					_self.$message({
						type: 'success',
						message: '借阅成功!'
					});
				})
			},
			getLendUser() {
				var _self = this
				this.$UserDatastore.findOne({
					"number": _self.usermodel.number
				}, function(err, docs) {
					console.log(docs)
					if (docs == null) {
						_self.$message({
							type: 'info',
							message: '用户不存在。'
						});
						return;
					}
					if (_self.usermodel.number === undefined) {
						_self.$message({
							type: 'info',
							message: '出错啦，请输入正确的ISBN码。'
						});
						return;
					}

					var filter = {
						$and: []
					}
					filter.$and.push({
						userNumber: _self.usermodel.number
					})

					filter.$and.push({
						state: Number(0)
					})
					_self.$BookDatastore.find(filter).skip(0).limit(999)
						.exec(function(
							err, bdocs) {
							if (bdocs == null) {
								_self.$message({
									type: 'info',
									message: '该用户没有在借读书'
								});
								return
							}
							_self.holdBooks = bdocs
						})
					_self.user = docs
					_self.showReturnBlock = 'showBooks'
				})
			},
			getLendBook() {
				var isMatch = true
				for (var i = 0; i < this.holdBooks.length; i++) {
					if (this.holdBooks[i].isbn === (this.bookmodel.isbn)) {
						if (this.lendBooks.length > 0) {
							for (var m in this.lendBooks) {
								if (m.isbn != this.boolmodel.isbn) {
									this.lendBooks.push(this.holdBooks[i])
									isMatch = false
								}
							}
						} else {
							this.lendBooks.push(this.holdBooks[i])
							isMatch = false
						}
						break;
					}
				}
				if (isMatch) {
					this.$message({
						type: 'info',
						message: '请输入正确的isbn。'
					});
				}
			},
			excuteReturn() {
				var _self = this
				for (var b = 0; b < _self.lendBooks.length; b++) {
					_self.lendBooks[b].state = 1
					_self.lendBooks[b].userNumber = '' //lend user
					_self.lendBooks[b].lendTime = ''
					_self.$BookDatastore.update({
						_id: _self.lendBooks[b]._id
					}, {
						$set: _self.lendBooks[b]
					}, function(err, docs) {

					})
				}
				// this.$LendDatastore.update({
				// 	_id: this.lendModel._id
				// }, {
				// 	$set: this.lendModel
				// }, function(err, docs) {
				// 	_self.$message({
				// 		type: 'success',
				// 		message: '归还成功!'
				// 	});
				_self.dialogReturnBooksVisible = false
				// })

			}
		}
	}
</script>

<style>
	/*lend cart style*/
	.card-style {
		width: 200px;
		height: 250px;
		float: left;
	}

	.image {
		width: 100%;
		height: 180px;
		display: block;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.time {
		font-size: 13px;
		color: #999;
	}

	.bottom {
		margin-top: 13px;
		line-height: 12px;
	}

	.button {
		padding: 0 !important;
		float: right;
	}




	#app {
		height: 100vh;
	}

	/* CSS */
	#main-container {
		height: 93vh -60;
	}

	.enterprise_panner {
		height: 60px;
	}

	.enterprise_panner img {
		height: 60px;
	}

	/* header style */
	.common-lend {
		height: 50px !important;
		width: 80px !important;
		border-bottom-left-radius: 25px !important;
		border-top-left-radius: 25px !important;
	}

	.common-return {
		height: 50px !important;
		width: 80px !important;
		border-bottom-right-radius: 25px !important;
		border-top-right-radius: 25px !important;
	}

	.custom-header {
		vertical-align: middleh !important;
		background-color: #cccccc;
	}

	/*comon */
	el-container {
		padding: 10px;
	}

	.pagination-style {
		padding: 10px;
		text-align: center;
	}

	/*return book dialog*/
	.showBooks {
		display: block;
	}

	.hiddenBooks {
		display: none
	}
</style>
